<template>
  <div>
    <el-dialog title="漏打卡" :visible.sync="LouDaKamsg" width="60%" :before-close="ChildChang">
      <div class="youcan">
        <el-button type="warning" class="fr">提交给第一处理人</el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <div class="biaoti">漏打卡申请</div>
          <table width="100%" class="sqxx">
            <tr>
              <th width="15%">姓名：</th>
              <td width="18%">刘楚</td>
              <th width="15%">部门：</th>
              <td width="18%">研发部</td>
              <th width="15%">职务：</th>
              <td width="18%">JAVA工程师</td>
            </tr>

            <tr>
              <th>
                <i class="fa fa-asterisk red" aria-hidden="true"></i> 漏打卡时间：
              </th>

              <td colspan="5">
                <el-date-picker v-model="kaisrq" type="date" placeholder="选择日期"></el-date-picker>&nbsp;&nbsp;&nbsp;
                <input type="radio" />是
                <input type="radio" />否
              </td>
            </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <ul class="xxlc">
            <li>
              <span class="circle"></span>员工漏打考勤卡需填写《
              <span class="orange">考勤漏刷卡补签单</span>》，敏捷团队成员领导批准。
            </li>
            <li>
              <span class="circle"></span>产品经理、团队领导由总经理助理审批。
            </li>
            <li>
              <span class="circle"></span>其他部门由部门经理批准。
            </li>
          </ul>
          <div class="youcan1">
            <el-button type="success" class="fr" @click="innerVisible=true">保存模板</el-button>
            <el-button type="primary" class="fr" @click="innerVisible1=true">引入模板</el-button>
          </div>

          <el-table :data="tableData" style="width: 100%" :border="true">
            <el-table-column
              prop="CaoZ"
              label="操作"
              width="180"
              header-align="center"
              align="center"
            >
              <img src="../assets/images/close.png" alt class="cz" />
              <img src="../assets/images/down.png" alt />
            </el-table-column>
            <el-table-column
              prop="LCHJ"
              label="流程环节"
              width="180"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column prop="mz" label="流程处理人" header-align="center" align="center">
              <el-input size="mini" style="width:50%"></el-input>
              <img src="../assets/images/search.png" alt class="sacrch" />
            </el-table-column>
            <el-table-column prop="LCCZ" label="流程操作" header-align="center" align="center">申请</el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-dialog width="30%" title="保存模板" :visible.sync="innerVisible" append-to-body>
        <Bcwmb></Bcwmb>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取消</el-button>
          <el-button type="primary" @click="innerVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog width="50%" title="引入流程模板" :visible.sync="innerVisible1" append-to-body>
        <XjMb></XjMb>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible1 = false">取消</el-button>
          <el-button type="primary" @click="innerVisible1 = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="ChildChang">取消</el-button>
        <el-button type="primary" @click="ChildChang">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import Bcwmb from "./Bcwmb.vue";
import XjMb from "./XjMb.vue";

export default {
  data() {
    return {
      kaisrq: "",
      jiesrq: "",
      innerVisible1: false,
      innerVisible: false,
      dialogVisible: true,
      data1: true,
      data2: "",
      yccdd: "",
      desc: "",
      sqdp: "",
      sqjtgj: "",
      sqjtgj_wrap: [
        {
          label: "飞机",
          value: "1"
        }
      ],

      LCCZ_wrap: [
        { label: "团队领导", value: "1" },
        { label: "总经理助理", value: "2" }
      ],
      value: "",
      value1: "",
      activeName: "first",
      tableData: [
        {
          LCHJ: "1",
          mz: "刘倩"
        },
        {
          LCHJ: "2",
          mz: "刘三"
        }
      ]
    };
  },
  props: ["LouDaKamsg"],
  methods: {
    ChildChang: function() {
      this.$emit("LouDaKason", false);
    }
  },
  components: {
    Bcwmb,
    XjMb
  }
};
</script>

<style lang="scss" scoped>
.youcan {
  height: 40px;
}
.biaoti {
  text-align: center;
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.orange {
  color: #ec971f;
  margin-bottom: 10px;
}
.ccsqbg > div {
  line-height: 50px;
  padding-left: 6px;
  padding-right: 6px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.ccsqbg > div:nth-child(2n + 1) {
  background: #f9f9f9;
  text-align: right;
  height: 50px;
  line-height: 50px;
}
.ccsqbg > div:nth-child(1) {
  border-left: 1px solid #ddd;
}
.ccsqbg1 {
  border-top: 1px solid #ddd;
}
.ccsqbg2 > div:nth-child(2n + 1) {
  height: 80px !important;
  line-height: 80px !important;
}
.ccsqbg2 > div:nth-child(2n) {
  height: 80px !important;
  line-height: 66px !important;
}
.youcan1 {
  padding: 10px 0;
  height: 60px;
}
.youcan1 button {
  margin-left: 10px;
}
.cz {
  margin-right: 10px;
}
.sacrch {
  vertical-align: middle;
  margin-left: 10px;
}
</style>